<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>电影院购票系统</title>
</head>
<body background="../../resources/home/images/back.png">
<!-- ------------------------------------------------------------------- -->
<!-- 导航栏 -->
<%@include file="../common/header.jsp"%>


<!-- 主体 -->
<div class="main" style="height:1200px;" >
    <div class="main-inner main-page" style="margin-top: 3px; " >
        <div class="layui-carousel" id="test3" lay-filter="test4">
            <div carousel-item="">
                <div>
                    <img src="../../resources/home/images/movie.png">
                </div>
                <div>
                    <img src="../../resources/home/images/hali.png">
                </div>
                <div>
                    <img src="../../resources/home/images/batman.png">
                </div>

                <div>
                    <img src="../../resources/home/images/spider.png">
                </div>
            </div>
        </div>
        <div class="aside" >
            <!-- 3 -->
            <div class="most-expect-wrapper">
                <div class="panel">
                    <div class="panel-header">
                        <span class="panel-title">
                              <span class="textcolor_orange">高分推荐</span>
                            </span>
                    </div>
                    <div class="panel-content">
                        <ul class="ranking-wrapper ranking-mostExpect" id="sortMovie">

                            <c:forEach var="movie" items="${rateMovieList}" varStatus="vs">
                                <li class="ranking-item ranking-top ranking-index-1" style="position: relative;margin-top:40px;">
                                    <i class="movie-rank">${vs.index + 1}</i>
                                    <a href="../movie/info?id=${movie.id}" data-act="mostExpect-movie-click" data-val="{movieid:1229534}">
                                        <div class="ranking-top-left">
                                            <img class="ranking-img  default-img" src="../../common/file/view_photo?filename=${movie.photo}" style=width:140px;height:194px>
                                        </div>
                                        <div class="ranking-top-right">
                                            <div class="ranking-top-right-main">
                                                <span class="ranking-top-moive-name">${movie.name}</span>
                                                <p class="ranking-release-time">上映时间：<fmt:formatDate value="${movie.createTime}" pattern="yyyy-MM-dd HH:mm"/></p>
                                                <p class="ranking-top-wish">
                                                    <span class="stonefont">${movie.rate}</span>分
                                                </p>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </c:forEach>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="movie-grid">

            <div class="panel-header">
                    <span class="panel-more">
                        <a href="../movie/list" class="textcolor_red" data-act="all-playingMovie-click">
                            <span>全部</span>
                        </a>
                        <span class="panel-arrow panel-arrow-red"></span>
                    </span>
                <span class="panel-title hot-title">
                    <span class="textcolor_red">正在热映（${total}部）</span>
                </span>
            </div>
            <div class="panel-content">
                <ul class="movie-list movie-hot">
                    <c:forEach var="movie" items="${movieList}" varStatus="vs">
                        <li style="height:260px;margin-top:40px;margin-bottom: 40px;">
                            <div class="movie-item">
                                <a href="../movie/info?id=${movie.id}" data-act="playingMovie-click" data-val="1">
                                    <div class="movie-poster" style="cursor:default;">
                                        <img id="moive_picture" src="../../common/file/view_photo?filename=${movie.photo}" />
                                        <div class="movie-overlay movie-overlay-bg">
                                            <div class="movie-info">
                                                <div class="movie-score">
                                                    <i id="moive_score" class="integer">${movie.rate}</i>
                                                </div>
                                                <div class="movie-title movie-title-padding" title="${movie.name}">${movie.name}</div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                <div class="movie-detail movie-detail-strong movie-sale">
                                    <a href="../movie/info?id=${movie.id}" class="active" data-act="salePlayingMovie-click" data-val="{movieid:42964}">购 票</a>
                                </div>
                            </div>
                        </li>
                    </c:forEach>

                </ul>
            </div>
        </div>
    </div>
</div>

<!-- 脚 -->
<%@include file="../common/footer.jsp"%>

<!-- ------------------------------------------------------------------- -->
<!-- ------------------------------------------------------------------- -->
<style>
    .movie-rank{
        position: absolute;
        z-index: 9999 !important;
        top: 0px;
        left: 0px;
        background-color: #ffb400;
        color: #fff;
        width: 20px;
        height: 20px;
        padding-left: 4px;
        font-size: 18px;
    }
</style>
<script>
    var clientHeight = document.documentElement.clientHeight;

    window.onload = function(){
       // initHostMovie(); //初始化正在热映和即将上映电影
        initHeader();
    }

    //图片轮播
    layui.use(['carousel', 'form'], function(){
        var carousel = layui.carousel, form = layui.form;
        carousel.render({
            elem: '#test3'
            ,width: '100%'
            ,height: '368px'
            ,interval: 5000
        });
    });

</script>
<!-- ------------------------------------------------------------------- -->
</body>
</html>
